import Vue from "vue";
import VueRouter from "vue-router";

// 引入组件
// import Home from "@/views/Home";
// import About from "@/views/About";
// import Message from "@/views/Message";
// import News from "@/views/News";
// import Detail from "@/views/Detail";

// 路由懒加载
// 1. 代码分割：将每个路由组件打包成单独js文件
// 2. 按需加载：需要使用路由组件时才会加载相应js文件
const Home = () => import("@/views/Home");
const About = () => import("@/views/About");
const Message = () => import("@/views/Message");
const News = () => import("@/views/News");
const Detail = () => import("@/views/Detail");

// 安装插件
// 提供两个内置全局组件：router-link 和 router-view (RouterLink 和 RouterView)
Vue.use(VueRouter);

/*  
  路由两种模式：
    1. hash
    2. history

      区别：
        1. hash模式地址带#，history模式地址不带#
        2. 刷新浏览器时，hash提交请求只有#前面内容，history提交请求整个地址
           history刷新会出现404。
        3. 底层原理不一样：
          hash -> window.location.hash  window.onhashchange 
          history -> window.history.pushState/replaceState  window.onpopstate
        4. 兼容性：hash兼容性更好ie6+，history兼容性更差ie10+
          可以去caniuse网址查询
*/

const router = new VueRouter({
  mode: "history", // 路由的模式（两种：hash和history）
  routes: [
    // 路由配置项
    {
      path: "/home", // 路由路径(只能以 / 开头)
      component: Home, // 路由组件
      name: "Home", // 路由名称
      redirect: "/home/news", // 重定向地址
      // 子路由
      children: [
        {
          path: "/home/message",
          component: Message,
          name: "Message",
          children: [
            {
              name: "Detail",
              path: "/home/message/:id",
              component: Detail,
            },
          ],
        },
        {
          path: "news", // 路径简写：自动补全父路由路径 -> /home/news
          component: News,
          name: "News",
          meta: {
            name: "jack",
            age: 18,
          },
        },
      ],
    },
    {
      path: "/about",
      component: About,
      name: "About",
      // 组件独享守卫
      beforeEnter(to, from, next) {
        next();
      },
    },
    {
      path: "*", // 匹配任意地址
      redirect: "/home", // 重定向
    },
  ],
});

/*
  路由导航守卫：
    1. 全局路由导航守卫（重要）
      beforeEach 路由跳转之前触发
      beforeResolve 路由解析时触发
      afterEach 路由跳转之后触发

      功能：权限管理
    2. 路由独享导航守卫
      beforeEnter

    3. 组件独享导航守卫
      beforeRouteEnter
      beforeRouteUpdate (2.2 新增)
      beforeRouteLeave

      https://v3.router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E7%BB%84%E4%BB%B6%E5%86%85%E7%9A%84%E5%AE%88%E5%8D%AB
*/

router.beforeEach((to, from, next) => {
  /*
    to 要去的路由对象 $route
    from 从哪来的路由对象 $route

    A(from) --> B(to)

    next 必须要调用
      next() 直接调用，跳转to对应的路由
      next('/xxx') 调用传参，传参地址就是要跳转的路由地址
  */
  console.log("beforeEach", to, from);
  // next("/login"); // 必须要调用
  next();
});

router.afterEach((to, from) => {
  console.log("afterEach", to, from);
});

export default router;
